模板內的表達式做不到的就交給計算屬性吧。
也就是說，任何複雜的邏輯都應該交給計算屬性。
基礎範例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// this 指向 vm 實體
return this.message.split('').reverse().join('')
}
}
})
|
結果：
Original message: “Hello”
Computed reversed message: “olleH”
緩存
使用方法其實也可以達到計算屬性的效果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Methods reversed message: "{{ reversed() }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
methods: {
reversed: function () {
return this.message.split('').reverse().join('')
}
}
})
|
結果：
Original message: “Hello”
Computed reversed message: “olleH”
Methods reversed message: “olleH”
計算屬性與方法的差異在於是否有緩存。
對於計算屬性來說，如果它所依賴的資料(以上面為例，就是 message)沒有改變，那麼它就不會重新求值，只會返回上次的計算結果；而調用方法則是每次觸發重新渲染都會重新求一次值。
所以如果現在有一個十分耗性能的函式，並且它不需用時時刷新，那麼最好就使用計算屬性，而當不希望有緩存時，就改成使用方法。
setter
計算屬性默認只有 getter，但也能自設 setter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <div id="app">
<div>{{ fullName }}</div>
</div>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Clark',
lastName: 'Kent'
},
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
|
結果：
Clark Kent
如果解開最後一行的註解，setter 會被調用，data 會更新，
結果：
Kal El
